@extends('admin.layout')
@section('content')
  <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                地区分类管理
                <small>列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i>主页</a></li>
                <li><a href="#">地区分类管理</a></li>
                <li class="active">列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">快速查看地区分类</h3>
                        </div><!-- /.box-header -->
                        <div class="box-body">
                             @if(session('info'))
                             <div class="alert alert-danger alert-dismissable">
                                <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                <h4><i class="icon fa fa-ban"></i> 提示!</h4>
                                <p>{{ session('info') }}</p>
                            </div>
                            @endif
                            <div class='row'>

                            <div class='col-md-4'>
                           		<select form='frm' name='num' class="form-control">
                                        <option {{ empty($request['num'])?'selected':($request['num']==10?'selected':'') }}>10</option>
                                        <option {{ empty($request['num'])?'':($request['num']==25?'selected':'') }}>25</option>
                                        <option {{ empty($request['num'])?'':($request['num']==50?'selected':'') }}>50</option>
                                        <option {{ empty($request['num'])?'':($request['num']==100?'selected':'') }}>100</option>
                                </select>
                           	</div>
                           	<div class='col-md-4 col-md-offset-4'>
	                            <form id='frm' action="{{ url('/admin/regioncate') }}" method='get'>
		                            <div class="input-group input-group-sm">
		                                <input type="text" value="{{ $request['search'] or '' }}" name='search' class="form-control">
					                    <span class="input-group-btn">
					                      <button class="btn btn-info btn-flat">搜索</button>
					                    </span>
					            	</div>	
	                            </form>
                            </div>
                           </div>
                            <br>
                            <table id="example2" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>地区分类名</th>
                                    <th>地区类型</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($data as $k => $cate)
                                
                                <tr  id="{{  $cate -> id }}" pid="{{ $cate -> pid }}" style='display:none;'>
                                    <td class='ids'>{{ $cate -> id }}</td>
                                    <!-- pid=0的是父类 让其显示 -->
                                    <td class='name'>{{ $cate -> name }}</td>
                                    <td class='status'>{{ $cate -> status?'主要城市':'省市' }}</td>
                                    <td style="height:20px"><a style='height:40px; min-width: 50px;padding: 10px 5px;' class="btn btn-app" href="{{ url('/admin/regioncate/') }}/{{ $cate -> id }}/edit"><i class="fa fa-edit"></i></a> |
                                        <a style='padding: 9px;margin-bottom: 10px;width:44px' href="javascript:void(0)" cid='del' class="btn btn-info btn-md">
                                          <span class="glyphicon glyphicon-trash"></span>
                                        </a>
                                        <form style='display:none' action="{{ url('/admin/regioncate') }}/{{ $cate -> id }}" method='post'>
                                            {{ csrf_field() }}
                                            {{ method_field('DELETE') }}
                                            <button>删除</button>
                                        </form>
                                    </td>
                                </tr>

                                 <tr style='display:none;'>
                                    <td colspan="5">
                                @if($k < 24) 
                                @if(!empty($er[$k]))
                                 <table id="tab{{ $cate -> id }}" class="table table-bordered table-hover">
                                       
                                        @foreach($er[$k] as $c)
                                        <tr  id="{{  $c -> id }}" pid="{{ $c -> pid }}" style='display:none;'>
                                            <td class='ids'>{{ $c -> id }}</td>
                                            <!-- pid=0的是父类 让其显示 -->
                                            <td class='name'>{{ $c -> name }}</td>
                                            <td class='status'>{{ $c -> status?'主要城市':'省市' }}</td>
                                            
                                            <td>
                                                <a style='height:40px; min-width: 50px;padding: 10px 5px;' class="btn btn-app" href="{{ url('/admin/regioncate/') }}/{{ $c -> id }}/edit"><i class="fa fa-edit"></i></a> |
                                        <a style='padding: 9px;margin-bottom: 10px;width:44px' href="javascript:void(0)" cid='del' class="btn btn-info btn-md">
                                          <span class="glyphicon glyphicon-trash"></span>
                                        </a>
                                                <form style='display:none' action="{{ url('/admin/regioncate') }}/{{ $c -> id }}" method='post'>
                                                    {{ csrf_field() }}
                                                    {{ method_field('DELETE') }}
                                                    <button>删除</button>
                                                </form>
                                            </td>
                                        </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                    @endif
                                    @endif
                                   </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                            {!! $data -> appends($request) -> render() !!}
                        </div><!-- /.box-body -->
                    </div><!-- /.box --> 
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
    <script>
    window.onload=function(){
        $('tr[pid=0]').css('display','');
        // $('tr[pid=0]').hover(function(){
                
        //         // 获取pid的id号
        //         var pid = $(this).attr('id');
        //         $('tr[pid=' + pid + ']').css('display','');
        // },function(){
        //         // 获取pid的id号
        //         // var pid = $(this).attr('id');
        //         // $('tr[pid='+ pid +']').css('display','none');
        // });

        $('tr[pid=0]').hover(function(){
                
                // 获取pid的id号
                var pid = $(this).attr('id');
                var nexttr = $(this).next();
                nexttr.css('display','');
                $('tr[pid=' + pid + ']').css('display','');
                // $('tr[pid=' + pid + ']').wrapAll('<div style="background:#f0f;display:block;" pid = "'+ pid +'"></div>');
                $('tr[pid=0][id!=' + pid + ']').mouseover(function(){
                    // $('tr[pid=' + pid + ']').unwrap();
                    $('tr[pid='+ pid +']').css('display','none');
                    nexttr.css('display','none');

                });
        });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        }); 
        // ajax更新地区分类状态开始
        // start
        // alert($);// 验证jQuery引入是否正确
        // $('[id]').on('click',function(){
            // alert('11');
            // id 参数
            // var id = $(this).parent().children().first().html();
            // var id = $(this).parent().find('.ids').html();
            // var td = $(this);
            // console.log(id);
        //     $.ajax({
        //         // 发送ajax的url中的 {{--  --}} 必须加上引号,否则会认为js的语法去执行
        //         url:'{{ url("/admin/regioncate/ajaxUpdate") }}',
        //         type:"POST",
        //         data:{id:id},
        //         success:function(data)
        //         {
        //             // alert(data);
        //             if(data == '0')
        //             {
        //                 td.html('启用');
        //             }else if(data == '1')
        //             {
        //                 td.html('禁用');
        //             }else
        //             {
        //                 alert('修改失败');
        //             }
        //         },
        //         dataType:'json'
        //     });
        // });
        // ajax更新地区分类状态结束
        // ajax End
        function dblClick()
        {
            // alert($(this).html());
            // 获取id
            var id = $(this).parent().find('.ids').html();
            // 当前对象
            var td = $(this);

            // 获取当前内容的值
            var oldName = td.html();
            // 设置input框
            var inp = $('<input type="text" />');
            // 设置value的值
            inp.val(oldName);

            // 替换当前对象的值
            $(this).html(inp);

            // 获取焦点
            inp.select();

            // 添加失去焦点事件
            inp.on('blur',function(){
                // alert('blur');
                var newName = inp.val();

                // 书写ajax
                $.ajax({
                    url:"{{ url('/admin/regioncate/ajaxName') }}",
                    type:"POST",
                    data:{id:id,name:newName},
                    success:function(data)
                    {
                        // 添加双击事件
                        td.on('dblclick',dblClick);
                        // alert(data);
                        if(data == '1')
                        {
                            td.html(newName);
                        }else if(data == '0')
                        {
                            td.html(oldName);
                        }else
                        {
                            inp.val(oldName);
                            alert('地区分类名已存在');
                            // 将双击事件清除
                            td.unbind('dblclick');
                        }
                    },
                    dataType:'json'
                });
                
            });
            // 将双击事件清除
            $(this).unbind('dblclick');
            
        }
        // 双击地区分类名实现编辑,移出完成操作Start
        $('.name').on('dblclick',dblClick);
        // End

        // console.log(document.forms[1].elements[0]);
        // var s = document.forms[1].elements[0];
        // s.onchange=function(){
        //      for(var n in document.forms[1].elements)
        //      {
        //          console.log(document.forms[1].elements[n].value);
        //      }
        // };
        // console.log($('a[cid=del]'));
        $('a[cid=del]').each(function(i,v){
            // console.log(i,v);
            $(v).click(function(){
                // console.log($(this).parent());
                // console.log($(this).parent().find('form'));
                console.log($(this).parent().find('form').submit());
                
            });
        });
    };
    </script>
@endsection